<script setup>
	import { onLoad, onReady } from '@dcloudio/uni-app'
	import { reactive, ref } from 'vue'
	import * as util from '@/amtf/utils'
	// 获取屏幕边界到安全区域距离
	const { safeAreaInsets } = uni.getSystemInfoSync()
	// 弹出层组件
	const popup = ref(null)

	// 取消原因列表
	const reasonList = ref([
		'商品无货',
		'不想要了',
		'商品信息填错了',
		'地址信息填写错误',
		'商品降价',
		'其它',
	])

	const 取消原因 = ref('')

	// 复制内容
	const onCopy = (id) => {
		// 设置系统剪贴板的内容
		uni.setClipboardData({ data: id })
	}

	// 获取页面参数
	const { id } = defineProps({
		id: String
	})

	// 获取页面栈
	const pages = getCurrentPages()

	// #ifdef MP-WEIXIN
	// 获取当前页面实例，数组最后一项
	const pageInstance = pages.at(-1)

	// 页面渲染完毕，绑定动画效果
	onReady(() => {
		// 动画效果,导航栏背景色
		pageInstance.animate(
			'.navbar',
			[{ backgroundColor: 'transparent' }, { backgroundColor: '#f8f8f8' }],
			1000, {
				scrollSource: '#scroller',
				timeRange: 1000,
				startScrollOffset: 0,
				endScrollOffset: 50,
			},
		)
		// 动画效果,导航栏标题
		pageInstance.animate('.navbar .title', [{ color: 'transparent' }, { color: '#000' }], 1000, {
			scrollSource: '#scroller',
			timeRange: 1000,
			startScrollOffset: 0,
			endScrollOffset: 50,
		})
		// 动画效果,导航栏返回按钮
		pageInstance.animate('.navbar .back', [{ color: '#fff' }, { color: '#000' }], 1000, {
			scrollSource: '#scroller',
			timeRange: 1000,
			startScrollOffset: 0,
			endScrollOffset: 50,
		})
	})
	// #endif

	const 订单 = reactive({})

	import { 商品下单展示 } from "@/utils/商品util.js"
	import useapi from '@/api/订单api'
	const api = useapi()
	const 初始化 = async () => {
		if (id) {
			const res = await api.查({ id })
			console.log('查 res: ', res);
			util.对象重予(订单, res.data)
			商品下单展示(订单.明细)
		}
	}

	onLoad(() => {
		初始化()
	})

	// 倒计时结束事件
	const onTimeup = () => {
		// 修改订单状态为已取消
		订单.状态 = '已取消'
	}

	const 点支付 = async () => {
		if (import.meta.env.DEV) {
			// 开发环境模拟支付
			console.log('开发环境模拟支付……待续');
			// await getPayMockAPI({ orderId: id })
		} else {
			// #ifdef MP-WEIXIN
			// 正式环境支付：1.获取支付订单信息，2.调用微信支付API
			// const res = await getPayWxPayMiniPayAPI({ orderId: id })
			// await wx.requestPayment(res.result)

			// 注意：因小程序上线后被恶意投诉：理由为支付 0.01 元后不发货，现调整为模拟支付
			// await getPayMockAPI({ orderId: id })
			// #endif

			// #ifdef H5 || APP-PLUS
			// H5端 和 App 端未开通支付-模拟支付体验
			// await getPayMockAPI({ orderId: id })
			// #endif
		}
		// 关闭当前页，再跳转支付结果页
		uni.redirectTo({ url: `/pagesOrder/payment/payment?id=${id}` })
	}

	// 是否为开发环境
	const isDev = import.meta.env.DEV
	// 模拟发货
	const 点发货 = async () => {
		if (isDev) {
			await getMemberOrderConsignmentByIdAPI(id)
			uni.showToast({ icon: 'success', title: '模拟发货完成' })
			// 主动更新订单状态
			订单.状态 = 待收货
		}
	}

	// 确认收货
	const onOrderConfirm = () => {
		// 二次确认弹窗
		uni.showModal({
			content: '为保障您的权益，请收到货并确认无误后，再确认收货',
			confirmColor: '#27BA9B',
			success: async (success) => {
				if (success.confirm) {
					const res = await putMemberOrderReceiptByIdAPI(id)
					// 更新订单状态
					订单 = res.result
				}
			},
		})
	}

	const 点删除 = () => {
		uni.showModal({
			content: '是否删除订单',
			confirmColor: '#27BA9B',
			success: async (success) => {
				if (success.confirm) {
					await deleteMemberOrderAPI({ ids: [id] })
					uni.redirectTo({ url: '/pagesOrder/list/list' })
				}
			},
		})
	}
	const 倒计时 = () => {
		const closeTime = new Date(订单.关闭时间);
		const currentTime = new Date();
		// 计算两个时间的时间戳差值（毫秒）
		const timeDiffInMs = closeTime - currentTime;
		const timeDiffInSeconds = Math.abs(timeDiffInMs / 1000);
		return timeDiffInSeconds
	}

	const 点取消 = async () => {
		// const res = await getMemberOrderCancelByIdAPI(id, { 取消原因: 取消原因.value })
		// 订单 = res.result
		// // 关闭弹窗
		// popup.value?.close()
		// // 轻提示
		// uni.showToast({ icon: 'none', title: '订单取消成功' })
	}
</script>

<template>
	<!-- 自定义导航栏: 默认透明不可见, scroll-view 滚动到 50 时展示 -->
	<view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
		<view class="wrap">
			<navigator v-if="pages.length > 1" open-type="navigateBack" class="back icon-left"></navigator>
			<navigator v-else url="/pages/index/index" open-type="switchTab" class="back icon-home">
			</navigator>
			<view class="title">订单详情</view>
		</view>
	</view>
	<scroll-view enable-back-to-top scroll-y id="scroller">
		<!-- 订单状态 -->
		<view class="overview" :style="{ paddingTop: safeAreaInsets?.top + 20 + 'px' }">
			<!-- 待付款状态:展示倒计时 -->
			<template v-if="订单.状态 == '待付款'">
				<view class="status icon-clock">等待付款</view>
				<view class="tips">
					<view class="row q-pr-md">
						<text class="">应付金额: </text>
						<view class="rmb">{{ 订单.总价 }} </view>
					</view>
					<text class="time">支付倒计时:</text>
					<uni-countdown :second="倒计时()" :show-day="false"
						:show-colon="false" @timeup="onTimeup" />
				</view>
				<view class="button" @tap="点支付">去支付</view>
			</template>
			<!-- 其他订单状态:展示再次购买按钮 -->
			<template v-else>
				<!-- 订单状态文字 -->
				<view class="status"> {{ 订单.状态 }} </view>
				<view class="button-group">
					<navigator class="button" :url="`/pagesOrder/create/create?zaici=${订单.id}`" hover-class="none">
						再次购买
					</navigator>
					<!-- 待发货状态：模拟发货,开发期间使用,用于修改订单状态为已发货 -->
					<view v-if="isDev && 订单.状态 == '待发货'" @tap="点发货" class="button">
						模拟发货
					</view>
					<!-- 待收货状态: 展示确认收货按钮 -->
					<view v-if="订单.状态 === '待收货'" @tap="onOrderConfirm" class="button">
						确认收货
					</view>
				</view>
			</template>
		</view>
		<!-- 配送状态 -->
		<view class="shipment">
			<!-- 用户收货地址 -->
			<view class="locate">
				<view class="user"> {{ 订单.收件姓名 }} {{ 订单.收件电话 }} </view>
				<view class="address"> {{ 订单.收件省市县 }} {{ 订单.收件详细地址 }}</view>
			</view>
		</view>

		<!-- 商品信息 -->
		<view class="goods">
			<view class="item">
				<navigator class="navigator" v-for="item in 订单.明细" :key="item.id"
					:url="`/pages/goods/detail?id=${item.商品id}`" hover-class="none">
					<image class="cover" :src="item.图片"></image>
					<view class="meta">
						<view class="name ellipsis">{{ item.名称 }}</view>
						<view class="type">{{ item.配置 }}</view>
						<text class="rmb">{{ item.价格 }}</text>
						<view class="quantity">数量:{{ item.数量 }}</view>
					</view>
				</navigator>
				<!-- 待评价状态:展示按钮 -->
				<view class="action" v-if="订单.状态 === '待评价'">
					<view class="button primary">申请售后</view>
					<navigator url="" class="button"> 去评价 </navigator>
				</view>
			</view>
			<!-- 合计 -->
			<view class="total">
				<view class="row">
					<view class="text">商品总价: </view>
					<view class="symbol">{{ 订单.商品总价 }}</view>
				</view>
				<view class="row">
					<view class="text">运费: </view>
					<view class="symbol">{{ 订单.运费 }}</view>
				</view>
				<view class="row">
					<view class="text">应付金额: </view>
					<view class="symbol primary">{{ 订单.总价 }}</view>
				</view>
			</view>
		</view>

		<!-- 订单信息 -->
		<view class="detail">
			<view class="title">订单信息</view>
			<view class="row">
				<view class="item">
					订单编号: {{ 订单.id }} <text class="copy" @tap="onCopy(订单.id)">复制</text>
				</view>
				<view class="item">下单时间: <uni-dateformat :date="订单.CreatedAt"></uni-dateformat></view>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="toolbar-height" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }"></view>
		<view class="toolbar" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }">
			<template v-if="订单.状态 === '待付款'">
				<view class="button primary" @tap="点支付"> 去支付 </view>
				<view class="button" @tap="popup?.open?.()"> 取消订单 </view>
			</template>
			<!-- 其他订单状态:按需展示按钮 -->
			<template v-else>
				<navigator class="button secondary" :url="`/pagesOrder/create/create?zaici=${订单.id}`"
					hover-class="none">
					再次购买
				</navigator>
				<view class="button primary" v-if="订单.状态 === '待收货'" @tap="onOrderConfirm">
					确认收货
				</view>
				<view class="button" v-if="订单.状态 === '待评价'"> 去评价 </view>
				<view class="button delete" v-if="['待评价','已完成','已取消'].includes(订单.状态)" @tap="点删除">
					删除订单
				</view>
			</template>
		</view>
	</scroll-view>
	<!-- 取消订单弹窗 -->
	<uni-popup ref="popup" type="bottom" background-color="#fff">
		<view class="popup-root">
			<view class="title">订单取消</view>
			<view class="description">
				<view class="tips">请选择取消订单的原因：</view>
				<view class="cell" v-for="item in reasonList" :key="item" @tap="取消原因 = item">
					<text class="text">{{ item }}</text>
					<text class="icon" :class="{ checked: item === 取消原因 }"></text>
				</view>
			</view>
			<view class="footer">
				<view class="button" @tap="popup?.close?.()">取消</view>
				<view class="button primary" @tap="点取消">确认</view>
			</view>
		</view>
	</uni-popup>
</template>

<style lang="scss">
	.navbar {
		width: 750rpx;
		color: #000;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9;
		/* background-color: #f8f8f8; */
		background-color: transparent;

		.wrap {
			position: relative;

			.title {
				height: 44px;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 32rpx;
				/* color: #000; */
				color: transparent;
			}

			.back {
				position: absolute;
				left: 0;
				height: 44px;
				width: 44px;
				font-size: 44rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				/* color: #000; */
				color: #fff;
			}
		}
	}

	.overview {
		display: flex;
		flex-direction: column;
		align-items: center;

		line-height: 1;
		padding-bottom: 30rpx;
		.status {
			font-size: 36rpx;
		}

		.status::before {
			margin-right: 6rpx;
			font-weight: 500;
		}

		.tips {
			margin: 30rpx 0;
			display: flex;
			font-size: 14px;
			align-items: center;

			.money {
				margin-right: 30rpx;
			}
		}

		.button-group {
			margin-top: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.button {
			width: 260rpx;
			height: 64rpx;
			margin: 0 10rpx;
			text-align: center;
			line-height: 64rpx;
			font-size: 28rpx;
			color: #27ba9b;
			border-radius: 68rpx;
			background-color: #fff;
		}
	}

	.shipment {
		line-height: 1.4;
		padding: 0 20rpx;
		margin: 20rpx 20rpx 0;
		border-radius: 10rpx;
		background-color: #fff;

		.locate,
		.item {
			min-height: 120rpx;
			padding: 30rpx 30rpx 25rpx 75rpx;
			background-size: 50rpx;
			background-repeat: no-repeat;
			background-position: 6rpx center;
		}

		.locate {
			background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/locate.png);

			.user {
				font-size: 26rpx;
				color: #444;
			}

			.收件详细地址 {
				font-size: 24rpx;
				color: #666;
			}
		}

		.item {
			background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/car.png);
			border-bottom: 1rpx solid #eee;
			position: relative;

			.message {
				font-size: 26rpx;
				color: #444;
			}

			.date {
				font-size: 24rpx;
				color: #666;
			}
		}
	}

	.goods {
		margin: 20rpx 20rpx 0;
		padding: 0 20rpx;
		border-radius: 10rpx;
		background-color: #fff;

		.item {
			padding: 30rpx 0;
			border-bottom: 1rpx solid #eee;

			.navigator {
				display: flex;
				margin: 20rpx 0;
			}

			.cover {
				width: 170rpx;
				height: 170rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
			}

			.meta {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				position: relative;
			}

			.name {
				height: 80rpx;
				font-size: 26rpx;
				color: #444;
			}

			.type {
				line-height: 1.8;
				padding: 0 15rpx;
				margin-top: 6rpx;
				font-size: 24rpx;
				align-self: flex-start;
				border-radius: 4rpx;
				color: #888;
				background-color: #f7f7f8;
			}

			.price {
				display: flex;
				margin-top: 6rpx;
				font-size: 24rpx;
			}

			.symbol {
				font-size: 20rpx;
			}

			.original {
				color: #999;
				text-decoration: line-through;
			}

			.actual {
				margin-left: 10rpx;
				color: #444;
			}

			.text {
				font-size: 22rpx;
			}

			.quantity {
				position: absolute;
				bottom: 0;
				right: 0;
				font-size: 24rpx;
				color: #444;
			}

			.action {
				display: flex;
				flex-direction: row-reverse;
				justify-content: flex-start;
				padding: 30rpx 0 0;

				.button {
					width: 200rpx;
					height: 60rpx;
					text-align: center;
					justify-content: center;
					line-height: 60rpx;
					margin-left: 20rpx;
					border-radius: 60rpx;
					border: 1rpx solid #ccc;
					font-size: 26rpx;
					color: #444;
				}

				.primary {
					color: #27ba9b;
					border-color: #27ba9b;
				}
			}
		}

		.total {
			line-height: 1;
			font-size: 26rpx;
			padding: 20rpx 0;
			color: #666;

			.row {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 10rpx 0;
			}

			.symbol::before {
				content: '¥';
				font-size: 80%;
				margin-right: 3rpx;
			}

			.primary {
				color: #cf4444;
				font-size: 36rpx;
			}
		}
	}

	.detail {
		line-height: 1;
		padding: 30rpx 20rpx 0;
		margin: 20rpx 20rpx 0;
		font-size: 26rpx;
		color: #666;
		border-radius: 10rpx;
		background-color: #fff;

		.title {
			font-size: 30rpx;
			color: #444;
		}

		.row {
			padding: 20rpx 0;

			.item {
				padding: 10rpx 0;
				display: flex;
				align-items: center;
			}

			.copy {
				border-radius: 20rpx;
				font-size: 20rpx;
				border: 1px solid #ccc;
				padding: 5rpx 10rpx;
				margin-left: 10rpx;
			}
		}
	}

	.toolbar-height {
		height: 100rpx;
		box-sizing: content-box;
	}

	.toolbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: calc(var(--window-bottom));
		z-index: 1;

		height: 100rpx;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		flex-direction: row-reverse;
		border-top: 1rpx solid #ededed;
		border-bottom: 1rpx solid #ededed;
		background-color: #fff;
		box-sizing: content-box;

		.button {
			display: flex;
			justify-content: center;
			align-items: center;

			width: 200rpx;
			height: 72rpx;
			margin-left: 15rpx;
			font-size: 26rpx;
			border-radius: 72rpx;
			border: 1rpx solid #ccc;
			color: #444;
		}

		.delete {
			订单: 4;
			color: #cf4444;
		}

		.button {
			订单: 3;
		}

		.secondary {
			订单: 2;
			color: #27ba9b;
			border-color: #27ba9b;
		}

		.primary {
			订单: 1;
			color: #fff;
			background-color: #27ba9b;
		}
	}

	.popup-root {
		padding: 30rpx 30rpx 0;
		border-radius: 10rpx 10rpx 0 0;
		overflow: hidden;

		.title {
			font-size: 30rpx;
			text-align: center;
			margin-bottom: 30rpx;
		}

		.description {
			font-size: 28rpx;
			padding: 0 20rpx;

			.tips {
				color: #444;
				margin-bottom: 12rpx;
			}

			.cell {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 15rpx 0;
				color: #666;
			}

			.icon::before {
				content: '\e6cd';
				font-family: 'erabbit' !important;
				font-size: 38rpx;
				color: #999;
			}

			.icon.checked::before {
				content: '\e6cc';
				font-size: 38rpx;
				color: #27ba9b;
			}
		}

		.footer {
			display: flex;
			justify-content: space-between;
			padding: 30rpx 0 40rpx;
			font-size: 28rpx;
			color: #444;

			.button {
				flex: 1;
				height: 72rpx;
				text-align: center;
				line-height: 72rpx;
				margin: 0 20rpx;
				color: #444;
				border-radius: 72rpx;
				border: 1rpx solid #ccc;
			}

			.primary {
				color: #fff;
				background-color: #27ba9b;
				border: none;
			}
		}
	}
</style>